<template>
  <div class="order">
    <!-- <div class="search">
      <div class="search-item">
        <p>订单号</p>
        <input type="text" placeholder="请输入订单号" />
      </div>
      <div class="search-item">
        <p>地区</p>
        <input type="text" placeholder="请输入地区名" />
      </div>
      <div class="search-item">
        <p>下单时间</p>
        <input type="text" placeholder="请输入下单时间" />
      </div>
      <el-button type="primary">查询订单</el-button>
    </div> -->
    <div class="search">
      <el-input v-model="ipt" placeholder="请输入订单号"></el-input>
      <el-button type="primary" @click="searchHandler">查询订单</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="date" label="下单时间" sortable width="180">
      </el-table-column>
      <el-table-column prop="id" label="订单号" width="180"> </el-table-column>
      <el-table-column prop="name" label="物品名称" width="180">
      </el-table-column>
      <el-table-column prop="tel" label="联系方式" width="180">
      </el-table-column>
      <el-table-column prop="money" label="消费金额" width="180">
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      ipt: "",
    };
  },
  methods: {
    formatter(row) {
      return row.address;
    },
    searchHandler() {
      this.axios({
        method: "post",
        url: "http://localhost:3000/searchOrder",
        data: {
          ipt: this.ipt.trim(),
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.status == 405) {
          this.tableData = res.data.order;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
  },
  created() {
    this.axios.get("http://localhost:3000/order").then((res) => {
      console.log(res);
      this.tableData = res.data.orders;
    });
  },
};
</script>

<style lang="less" scoped>
.order {
  //   background-color: #f7f7f7;
  height: 100%;
  width: 100%;
  padding: 20px;

  //   .search {
  //     display: flex;
  //     margin-bottom: 50px;

  //     .search-item {
  //       display: flex;
  //       align-items: center;
  //       font-size: 14px;
  //       background-color: #fff;
  //       padding: 0 10px;
  //       margin-right: 20px;
  //       border-radius: 10px;

  //       input {
  //         font-size: 12px;
  //         width: 150px;
  //         margin-left: 10px;
  //         outline: none;
  //         border: 1px solid #ccc;
  //         padding: 5px;
  //         border-radius: 2px;

  //         &::-webkit-input-placeholder {
  //           color: #bbbbbb;
  //         }
  //       }
  //     }
  //   }

  .search {
    width: 500px;
    display: flex;
    margin-bottom: 50px;
  }
}
</style>